<template>
	<view class="wrap">
		<cu-custom isBack="false" textColor='#333333' fhColor='#333333'>
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">确认订单</block>
		</cu-custom>

		<!-- 背景 -->
		<view class="bj" :style="{backgroundImage:'url('+imgUrl+'bac.png'+')'}">
		</view>

		<!-- 内容 -->
		<scroll-view scroll-y="true" class="container" :style="{height:height-CustomBar-10+'px'}">
			<!-- 地址 -->
			<view class="AddressArea">
				<view class="AppendAddress" v-if="!AddressList" @click="toAddress">去添加收货地址</view>
				<view class="chooseAddress" v-else @click="toAddress(AddressList)">
					<image :src="imgUrl + 'Order/ConfimOrder_Address.png'" class="addresssIcon"></image>
					<view class="Address">
						<view class="AddressBottom">{{ AddressList.receiverDetail }}</view>
						<view class="AddressTop">
							<view class="Name">{{ AddressList.receiverName }}</view>
							<view class="Phone">{{ AddressList.receiverTel }}</view>
						</view>
					</view>
					<text class="cuIcon-right jt"></text>
				</view>
			</view>

			<!-- 商品 -->
			<view class="CommodityInformation">
				<view class="CommodityList" v-for="(item, index) in cartList" :key="index">
					<view class="pic">
						<img :src="item.previewImg" alt="" class="Image" />
					</view>
					<view class="NameAndSpecificationAndPrice">
						<view class="Name">{{ item.goodsName }}</view>
						<view class="SpecificationAndCount">
							<view class="Specification">{{ item.specificationName }}</view>
						</view>
						<view class="Price">
							<view class="RMB">￥</view>
							<view class="priceNum">{{ item.goodsPrice }}</view>
							<view class="Count">x{{ item.goodsNum }}</view>
						</view>
					</view>
				</view>
				<!-- 订单备注 -->
				<view class="orderBzBox">
					<view class="text">订单备注</view>
					<input class="texta" type="text" placeholder="请输入要描述的文字" placeholder-class="textaYs"
						v-model="remark">
				</view>
			</view>
		</scroll-view>

		<!-- 底部按钮 -->
		<view class="footerBtnBox">
			<view class="l">
				<view class="num">共{{ cartList.length }}</view>
				<view class="text">合计：</view>
				<view class="price">
					<view class="dw">¥</view>
					<view class="xj">{{ qiuhe(cartList) }}</view>
				</view>
			</view>
			<view class="r">
				<picker @change="payStateListChange" :value="payStateListIndex" :range="payStateList" range-key='name'>
					<view class="picker">
						<view class="text">
							提交订单
						</view>
					</view>
				</picker>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: '',
				// 导航栏距离
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				imgUrl: this.$http.imgUrl + '/static/',

				// 地址
				AddressList: '',

				// 商品信息
				cartList: [],

				payStateList: [{
						id: 1,
						name: '微信支付'
					},
					{
						id: 2,
						name: '线下支付'
					}
				],
				payStateListIndex: -1,

				// 支付参数
				payMode: '',
				remark: '',
				shoppingCartIds: []
			};
		},
		onLoad(optipns) {
			this.height = uni.getSystemInfoSync().windowHeight
			this.getAddressList()
			this.cartList = JSON.parse(decodeURIComponent(optipns.cartList))

			uni.$off('activeCity')
			uni.$on('activeCity', res => {
				this.AddressList = res
			})
		},
		methods: {
			// 地址列表
			async getAddressList() {
				const url = this.api.my.AddressList;
				const res = await this.$http.get(url);
				this.AddressList = res.data.data[0] ? res.data.data[0] : '';
				console.log(res.data.data, "地址列表");
			},

			// 跳转地址
			toAddress(AddressList) {
				uni.navigateTo({
					url: "/pagesA/Order/SelectAddress?AddressList=" + encodeURIComponent(JSON.stringify(
						AddressList)),
				});
			},

			// 购物车付款
			gwcPayBtnData() {
				if (!this.AddressList) {
					uni.showToast({
						title: '请添加地址',
						icon: 'none'
					});
				}
				let shoppingCartIds = []
				for (var i in this.cartList) {
					shoppingCartIds.push(this.cartList[i].shoppingCartId)
				}
				let obj = {
					addressId: this.AddressList.id,
					payMode: this.payMode,
					remark: this.remark ? this.remark : '',
					shoppingCartIds: shoppingCartIds,
				}
				this.ConfimOrder(obj)
			},

			// 支付方式
			payStateListChange(e) {
				this.payMode = this.payStateList[e.detail.value].id
				this.gwcPayBtnData()
			},

			// 下单/支付
			async ConfimOrder(obj) {

				const url = this.api.shoppingCard.gwcOrder
				let res = await this.$http.post(url, obj)
				if (res.data.code != 200) {
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					});
					return
				}
				// 线下支付
				if (obj.payMode == 2) {

					// uni.$emit('ChangeCurrentPage', 'Order')
					uni.redirectTo({
						url: '/pagesA/Order/successfully?id=' + res.data.data.orderCode
					})
					return
				}
				const urla = this.api.shoppingCard.gwcPay
				let resa = await this.$http.post(urla, {
					orderCode: res.data.data.orderCode,
					payMode: 1
				})
				if (resa.data.code != 200) {
					uni.showToast({
						title: resa.data.message,
						icon: 'none'
					});
					return
				}
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: resa.data.data.timeStamp,
					nonceStr: resa.data.data.nonceStr,
					package: resa.data.data.package,
					signType: resa.data.data.signType,
					paySign: resa.data.data.paySign,
					success: (res) => {
						uni.showToast({
							title: '支付成功',
							icon: 'none'
						})
						// uni.$emit('ChangeCurrentPage', 'Order')
						uni.redirectTo({
							url: '/pagesA/Order/successfully?id=' + res.data.data.orderCode
						})
					},
					fail: (err) => {
						uni.showToast({
							title: '取消支付',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({})
						}, 300)
					}
				});
			},
			ToSelectAddress() {
				uni.navigateTo({
					url: "/pagesA/Order/SelectAddress",
				});
			},

			// 求和
			qiuhe(arr) {
				let zPirce = 0
				if (arr.length > 0) {
					for (var i in arr) {
						zPirce += arr[i].totalPrice
					}
				}
				return zPirce
			},
		},
	};
</script>
<style lang="scss" scoped>
	// 背景
	.bj {
		position: fixed;
		top: -4%;
		left: 0;
		width: 100%;
		height: 1204rpx;
		background-size: 100% 100%;
	}

	.container {
		background: #FAFAFA;
		padding-bottom: 128rpx;
		padding-top: 24rpx;
	}

	// 地址
	.AddressArea {
		width: 702rpx;
		min-height: 138rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(153, 153, 153, 0.12);
		border-radius: 24rpx;
		margin: 0 auto;
		padding: 32rpx 24rpx;

		.AppendAddress {
			width: 252rpx;
			height: 60rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			line-height: 60rpx;
			text-align: center;
			border: 2rpx solid rgba(0, 12, 39, 0.05);
			margin-left: 200rpx;
			margin-top: 10rpx;
		}

		.chooseAddress {
			display: flex;
			align-items: center;

			.addresssIcon {
				width: 28rpx;
				height: 36rpx;
				margin-right: 24rpx;
			}

			.Address {
				flex: 1;
				display: flex;
				flex-direction: column;

				.AddressBottom {
					font-size: 28rpx;
					font-weight: 600;
					color: #333333;
				}

				.AddressTop {
					display: flex;
					align-items: center;
					margin-top: 24rpx;

					view {
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
					}

					.Phone {
						font-size: 24rpx;
						margin-left: 10rpx;
					}
				}

				.Edit {
					width: 30rpx;
					height: 30rpx;

					.EditIcon {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	// 商品
	.CommodityInformation {
		width: 702rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(153, 153, 153, 0.12);
		border-radius: 24rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		padding: 32rpx 24rpx;

		.CommodityList {
			display: flex;
			margin-bottom: 32rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.pic {
				width: 180rpx;
				height: 180rpx;
				border-radius: 8rpx;
				overflow: hidden;
				margin-right: 16rpx;

				.Image {
					width: 100%;
					height: 100%;
				}
			}

			.NameAndSpecificationAndPrice {
				flex: 1;
				display: flex;
				flex-direction: column;
				height: 180rpx;

				.Name {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
				}

				.SpecificationAndCount {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					margin-top: 20rpx;

					.Specification {
						height: 56rpx;
						background: rgba(153, 153, 153, 0.12);
						border-radius: 8rpx;
						padding: 0 16rpx;
						line-height: 56rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #666666;
					}
				}

				.Price {
					color: #e34949;
					display: flex;
					align-items: flex-end;
					font-size: 24rpx;
					font-weight: 600;
					color: #FF5C46;
					flex: 1;

					.RMB {
						font-size: 24rpx;
					}

					.priceNum {
						font-size: 32rpx;
						flex: 1;
					}

					.Count {
						font-size: 28rpx;
						font-weight: 600;
						color: #333333;
					}
				}
			}
		}

		.CommodityList:last-child {
			margin-bottom: 0;
		}

		.orderBzBox {
			display: flex;
			align-items: center;
			border-top: 1rpx solid #F6F6F6;
			padding-top: 32rpx;

			.text {
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
				margin-right: 94rpx;
			}

			.texta {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				flex: 1;
				text-align: right;
			}

			.textaYs {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
			}
		}
	}

	// 底部按钮
	.footerBtnBox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		// align-items: center;
		height: 144rpx;
		background: #FFFFFF;
		justify-content: space-between;
		padding: 0 24rpx;
		padding-top: 16rpx;
		.l {
			display: flex;
			align-items: baseline;

			.num {
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
				margin-right: 16rpx;
			}

			.text {
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
			}

			.price {
				font-weight: 600;
				color: #FF5C46;
				display: flex;
				align-items: baseline;

				.dw {
					font-size: 24rpx;
					margin-right: 10rpx;
				}

				.xj {
					font-size: 36rpx;
				}
			}
		}

		.r {
			width: 232rpx;
			height: 76rpx;
			background: linear-gradient(135deg, #4D8BFF 0%, #78D8FB 100%);
			border-radius: 38rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>